<template>
  <el-form :inline="true" class="demo-form-inline">
    <!-- <el-form-item label="名称">
        <el-input v-model="formInline.user" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="详情">
        <el-input v-model="formInline.desc" placeholder="请输入详情" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item> -->

    <el-form-item>
      <el-button type="primary" @click="addUser">添加用户</el-button>
    </el-form-item>
  </el-form>
  <el-table :data="dataList.data" border style="width: 100%">
    <el-table-column prop="id" label="用户id" />

    <el-table-column prop="username" label="名字" />
    <el-table-column prop="passward" label="密码" width="180">
      <template #default>
        <span>******</span>
      </template>
    </el-table-column>
    <el-table-column prop="tel" label="电话号码" />
    <el-table-column prop="role" label="权限">
      <template #default="scope">
        <el-tag>
          {{ scope.row.role ? "管理员" : "商家" }}
        </el-tag>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template #default="scope">
        <el-button type="primary" @click="edit(scope.row)">编辑</el-button>
        <el-button type="danger" @click="deleteUser(scope.row)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <Pagination :count="count" @page-change="pageChange"></Pagination>
  <AddUser
    ref="dialog"
    :userData="userData1"
    :title="title"
    @getData="getData"
    :page="page.page"
  ></AddUser>
</template>

<script lang="ts" setup>
import AddUser from "@/components/AddUser.vue";
import Pagination from "@/components/Pagination.vue";
import { reactive, ref } from "vue";
import { UserList, userDelete } from "@/request/api";
import { userData } from "@/Type/user";
import { ElMessage } from "element-plus";

const count = ref(0);
const page = reactive({
  pageSize: 9,
  page: 1,
});
const userData1 = ref({});
const dataList = reactive(new userData());
// 获取用户数据
async function getUserList() {
  const { data } = await UserList(page);
  dataList.data = data.res;
  count.value = data.count;
}
getUserList();
// 页码改变
const pageChange = (e: number) => {
  page.page = e;
  getUserList();
};
const dialog: any = ref(null);
const title = ref("");
// 添加用户
const addUser = () => {
  dialog.value.showDialog = true;
  title.value = "添加用户";
  userData1.value = {};
};
// 编辑用户
const edit = (row: any) => {
  dialog.value.showDialog = true;
  title.value = "编辑用户";
  console.log(row);

  userData1.value = row;
};
const getData = (value: any, count: any) => {
  console.log(value, count);

  dataList.data = value;
  count.value = count;
};
const deleteUser = async (row: any) => {
  await userDelete(row.id).then((res) => {
    ElMessage.success("删除成功");
    getUserList();
  });
};
</script>

<style></style>
